<template>
  <div>
    <el-row >
      <el-col :span="24">
        <div class="content-wrapper">
          <div class="filter-content">
            <div class="filter-item">
              <div class="label-content">
                <el-input class="search-input-width elliptical-input" clearable v-model="baseTable.tableReqDto.code" placeholder="asin" style="width: 150px" />
                <el-input class="search-input-width elliptical-input" clearable v-model="baseTable.tableReqDto.title" placeholder="标题" style="width: 150px" />
                <el-input class="search-input-width elliptical-input" clearable v-model="baseTable.tableReqDto.brand" placeholder="品牌" style="width: 150px" />
                <el-input class="search-input-width elliptical-input" clearable v-model="baseTable.tableReqDto.keyword" placeholder="关键词" style="width: 150px" />

                <el-button style="height: 34px" :auto-insert-space="true" type="primary" round @click="baseTable.onSearch">
                  <el-icon style="margin-right: 5px;height: 34px"><Search /></el-icon>搜索
                </el-button>
                <el-button @click="resetFilter" round style="height: 34px; margin-left: 0px">
                  <el-icon  style="margin-right: 5px;height: 34px"><RefreshLeft /></el-icon>
                  重置
                </el-button>
              </div>
            </div>

          </div>


          <div class="products-box">
            <div class="products-container">
              <div class="products-list" ref="productsListDiv">
                <!-- 产品卡片 -->
                <div class="product-item" v-for="item in baseTable.tableData" :key="item.bsId" >
                  <!-- 扇形收藏按钮容器 -->
                  <div class="publish-btn-container"
                       :class="{
                       'always-visible': item.isCollect == 1,
                       'hover-visible': item.isCollect == 2
                     }">
                    <div class="publish-btn" @click.stop="collectedProductsListing(item)">
                  <span class="publish-text">
                      <el-icon><Star /></el-icon>
                  </span>
                    </div>
                  </div>
                  <div class="product-item-img" @click="onProductDetail(item)" >
                    <div class="img-slide-wrap2">
                      <el-image
                        class="img cursor-pointer"
                        :src="item.imgUrl"
                        :fit="'cover'"
                        @click="onProductDetail(item)"
                      ></el-image>
                    </div>
                  </div>

                  <div style="padding: 12px;padding-top: 0px">
                    <div style="font-size: 13px; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">
                      <el-icon style="color:#626EFB;font-size: 15px;margin-right: 5px"><Paperclip /></el-icon><a :href="item.url" target="_blank">{{item.url}}</a></div>
                    <div class="product-name" style="margin-top: 5px" @click="onProductDetail(item)" >{{ item.title }}</div>
                    <div class="product-info" @click="onProductDetail(item)" >
                      <div style="display: flex;justify-content: space-between">
                        <p style="color:#626EFB;font-size: 14px">＄{{item.price}}</p>
                      </div>
                      <p>
                        <span>原ASIN：</span>
                        <span>{{ item.code }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <!--              <div style="height: 50px"></div>-->
                <!--              <div class="product-item filler" v-for="n in 5" :key="'filler-' + n"></div>-->
              </div>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
    <!-- 分页组件 - 悬浮在底部 -->
    <div class="floating-pagination">
      <div style="padding-left: 20px">
      </div>
      <div style="padding-right: 20px">
        <table-pagination
          :hideOnSinglePage="false"
          :pagination="baseTable.dataPagination"
          @change="baseTable.onPaginationChange"
        />
      </div>
    </div>
    <!-- 侧边详情组件 -->
    <el-drawer
      v-if="detailVisible"
      v-model="detailVisible"
      size="80%"
      title="详情"
      direction="rtl"
      @close="handleDrawerClose"
    >
      <product-detail
        :productId="currentProductId"
        @close="detailVisible = false"
      />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useDefineTable } from '@/plugins/util/global-variable2'
import {collectedProductsListingApi, productSearch} from '@/api/common'
import TablePagination from '@/plugins/pair/table-pagination.vue'
import ProductDetail from './product-detail.vue'
import router from "@/router";
import {Check, Delete, Paperclip, RefreshLeft, Search, Star} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {ElMessage} from "element-plus";

// 表格配置
const baseTable = useDefineTable({
  tableReqDto: {
    status: 'all',
    name: '',
  },
  request: productSearch,
  renderBefore: (res: any) => {
    return res; // 确保返回处理后的数据
  },
  tableColumns: [
    { colKey: 'title', title: '产品信息', width: '400' },
    { colKey: 'price', title: '价格' },
    { colKey: 'saleVolume', title: '销售额', ellipsis: true },
    { colKey: 'availableDate', title: '上架时间', date: true, dateFormat: 'yyyy-MM-dd' },
    { colKey: 'sellerNum', title: '卖家数量', ellipsis: true },
    { colKey: 'weight', title: '重量体积', ellipsis: true },
    { colKey: 'categoryPath', width: '1' },
    { colKey: 'createTime', title: '创建时间', date: true },
    { colKey: 'opt', title: '操作', width: '100' },
  ],
})

// 重置筛选条件
const resetFilter = () => {
  baseTable.tableReqDto.code = '';
  baseTable.tableReqDto.title = '';
  baseTable.tableReqDto.brand = '';
  baseTable.tableReqDto.keyword = '';
  baseTable.onSearch();
}


// 侧边详情相关状态
const detailVisible = ref(false)
const currentProductId = ref('')

// 打开侧边详情
const onProductDetail = (row: any) => {
  currentProductId.value = row.bsId
  detailVisible.value = true
}

// 关闭抽屉时的处理
const handleDrawerClose = () => {
  // 可以添加一些清理工作
  currentProductId.value = ''
}
const selectedProductIds = ref<string[]>([])
const selectedProductAsins = ref<string[]>([])

// 判断是否选中的方法
const isSelected = (item: any) => {
  return selectedProductAsins.value.includes(item.code);
}

// 计算属性：判断是否全选
const isAllSelected = computed(() => {
  // 有数据且已选数量等于当前页总数量时为全选状态
  return baseTable.tableData.length > 0 &&
    selectedProductAsins.value.length === baseTable.tableData.length;
})
const collectedProductsListing = (row: any) => {
  if(row.isCollect == 1) return
  collectedProductsListingApi([row.bsId]).then(res=>{
    ElMessage.success('收藏成功')
    // // 收藏成功后更新isCollect状态
    row.isCollect = 1;
  })
}
// 全选/取消全选方法
const handleSelectAll = () => {
  if (isAllSelected.value) {
    // 取消全选
    selectedProductIds.value = [];
    selectedProductAsins.value = [];
  } else {
    // 全选当前页所有产品
    const allIds = baseTable.tableData.map(item => item.code);
    const allAsins = baseTable.tableData.map(item => item.code);
    // 使用Set确保数据不重复
    selectedProductIds.value = [...new Set(allIds)];
    selectedProductAsins.value = [...new Set(allAsins)];
  }
}
const handleCardClick = (item: any) => {
  const id = item.code
  const isSelected = selectedProductIds.value.includes(item.code)
  if (isSelected) {
    selectedProductIds.value = selectedProductIds.value.filter(_id => _id !== id)
    selectedProductAsins.value = selectedProductAsins.value.filter(asin => asin !== item.code)
  } else {
    selectedProductIds.value.push(id)
    selectedProductAsins.value.push(item.code)
  }
}

</script>

<style scoped>
/* 页面容器样式 */
.page-container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 80px; /* 为底部悬浮分页预留空间 */
}

.content-wrapper {
  padding-bottom: 20px;
}

/* 悬浮分页样式 */
.floating-pagination {
  position: sticky ;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 12px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 900;
  display: flex;
  margin-top: -10px;
  justify-content: space-between;
  align-items: center;
}

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask-content {
  text-align: center;
  background-color: white;
  padding: 30px 50px;
  border-radius: 8px;
}

.mask-text {
  margin-top: 15px;
  font-size: 16px;
  color: #333;
}

/* 其他样式保持不变 */
.edit-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6169FF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.product-item:hover .edit-btn {
  opacity: 1;
}

.edit-btn:hover {
  background-color: #fff;
  color: #6169FF;
  transform: translate(-50%, -50%) scale(1.1);
}

.publish-btn-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  border-radius: 5px;
  height: 60px;
  overflow: hidden;
  z-index: 2;
}

.publish-btn {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 60px;
  height: 60px;
  background-color: #6169FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: rotate(45deg);
  opacity: 0;
}

.publish-text {
  transform: rotate(-45deg);
  font-size: 16px;
  font-weight: 500;
  width: 80px;
  text-align: center;
  margin-left:2px;
  margin-top: 35px;
}

/* 已收藏状态 - 始终显示 */
.publish-btn-container.always-visible .publish-btn {
  top: -30px;
  right: -30px;
  opacity: 1;
}

/* 未收藏状态 - 鼠标悬停时显示50%透明度 */
.publish-btn-container.hover-visible .publish-btn {
  top: -30px;
  right: -30px;
  opacity: 0;
}

.product-item:hover .publish-btn-container.hover-visible .publish-btn {
  opacity: 0.5;
}

.publish-btn-container2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  border-radius: 5px;
  height: 60px;
  overflow: hidden;
  z-index: 2;
}

.publish-btn2 {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 60px;
  height: 60px;
  background-color: #6169FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: rotate(45deg);
  opacity: 0;
}

.publish-text2 {
  transform: rotate(-45deg);
  font-size: 16px;
  font-weight: 500;
  width: 80px;
  text-align: center;
  margin-left:40px;
  margin-top: 5px;
}

.product-item:hover .publish-btn2 {
  top: -30px;
  left: -30px;
  opacity: 0.5;
}

.selected {
  .publish-btn2 {
    top: -30px;
    left: -30px;
    opacity: 1!important;;
  }
}

.products-box {
  border-radius: 5px;
  padding: 8px;
  border: 1px solid #DDDFE6;
  background-color: #F7F9FE;
}

.products-container {
  max-width: 1880px;
  margin: 0 auto;
}

.products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product-item {
  height: 314px;
  position: relative;
  flex: 0 0 calc((100% - 6 * 12px) / 7);
  box-sizing: border-box;
  border: 1px solid #DDDFE6;
  background-color: white;
  border-radius: 6px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.product-item.filler {
  visibility: hidden;
  border: none;
  padding: 0;
}

.product-item:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.product-item-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}

.product-item-img .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-item:hover .product-item-img .img {
  transform: scale(1.05);
}

.product-name {
  font-size: 13px;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}

.product-info {
  font-size: 12px;
}

.product-info p {
  margin: 3px 0;
  line-height: 1.4;
}

.table-pagination{
  margin-top: 0px!important;
}

/* 响应式断点：适配小于1080p的屏幕 */
/* 1. 屏幕宽度 ≤1600px（如笔记本1366×768）：一行5个 */
@media screen and (max-width: 1600px) {
  .products-container {
    max-width: 1560px;
  }
  .product-item {
    flex: 0 0 calc((100% - 4 * 12px) / 5); /* (1560 - 4*12)/5 ≈ 302px */
  }
}

/* 2. 屏幕宽度 ≤1366px：一行4个 */
@media screen and (max-width: 1366px) {
  .products-container {
    max-width: 1320px;
  }
  .product-item {
    flex: 0 0 calc((100% - 3 * 12px) / 4); /* (1320 - 3*12)/4 ≈ 327px */
  }
}

/* 3. 屏幕宽度 ≤1024px（平板横屏）：一行3个 */
@media screen and (max-width: 1024px) {
  .products-container {
    max-width: 980px;
  }
  .product-item {
    flex: 0 0 calc((100% - 2 * 12px) / 3); /* (980 - 2*12)/3 ≈ 318px */
  }
}

/* 4. 屏幕宽度 ≤768px（平板竖屏/手机横屏）：一行2个 */
@media screen and (max-width: 768px) {
  .products-container {
    max-width: 720px;
  }
  .product-item {
    flex: 0 0 calc((100% - 1 * 12px) / 2); /* (720 - 12)/2 = 354px */
  }
}

/* 5. 屏幕宽度 ≤480px（手机竖屏）：一行1个 */
@media screen and (max-width: 480px) {
  .products-container {
    max-width: 100%;
  }
  .product-item {
    flex: 0 0 100%; /* 全屏宽度 */
  }
}
</style>
